<template>
  <div>
        <h1>axios和json综合</h1>
        <input type="button" value="请求和响应都是普通字符串" @click="method01()"> <br>
        <input type="button" value="响应数据改成json字符串" @click="method02()"> <br>
        <input type="button" value="请求数据也改成json字符串" @click="method03()"> <br>
        <hr>
        <h3>好友列表</h3>
        <div id="messageDiv"></div>
        <table width="500px" cellspacing="0px" cellpadding="5px" border="1px" id="myTable">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
            </tr>
            <!-- <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>-->
        </table>
  </div>
       
</template>


<script>
import axios from 'axios'
export default {
  methods: {
    //1.请求和响应都是普通字符串
    method01(){
      
      // 1.准备后台的url
      let url = "/ajaxJsonTest01Servlet";
      // 2.准备要传入的数据
      let params = "username=柳岩&password=1234"
      axios.post(url,params)
          .then(resp=>{
            console.log(resp.data)
          });
    },
    //2.请求是普通字符串，响应数据改成json字符串
    method02(){
       // 1.准备后台的url
      let url = "/ajaxJsonTest02Servlet";
      // 2.准备要传入的数据
      let params = "username=柳岩&password=1234"
      axios.post(url,params)
          .then(resp=>{
            // 3.定义数组，接收传来的数据
            let arr=resp.data;
            // 4.定义content，保存数组里的每个数据，用于后续拼接
            let content ="";
            // 5.遍历数组，取出数据,保留表头
            for(let friend of arr){
              content = content + `<tr>
                                      <td>${friend.id}</td>
                                      <td>${friend.name}</td>
                                      <td>${friend.age}</td>
                                      </tr>`
            }
            //将content内容放回到table标签中
             document.getElementById("myTable").innerHTML += content;

          });
         
    },
    //3.请求是json字符串，响应数据改成json字符串
    method03(){
       // 1.准备后台的url
      let url = "/ajaxJsonTest03Servlet";
      // 2.准备要传入的数据,json数据
      let params ={"username":"柳岩","password":"1234"}
      axios.post(url,params)
          .then(resp=>{
            // 3.定义变量，接收传来的数据
            let obj=resp.data;
            // 4. 判断，如果查询成功 那么将响应数据放入table标签中；如果失败，返回错误信息
            if(obj.flag){
              document.getElementById("messageDiv").innerHTML=obj.message;
              //5.定义数组，保存响应数据
              let arr = obj.valueData;
              // 6.定义content，保存数组里的每个数据，用于后续拼接
              let content ="";
              // 7.遍历数组，取出数据,保留表头
              for(let friend of arr){
                content = content + `<tr>
                                      <td>${friend.id}</td>
                                      <td>${friend.name}</td>
                                      <td>${friend.age}</td>
                                      </tr>`
              }
              document.getElementById("myTable").innerHTML += content;
            }else{
              document.getElementById("messageDiv").innerHTML=obj.message;
            }
          });   
    },
  }
}
</script>

<style>

</style>
